<script>
import { mapState, mapGetters, mapMutations, mapActions } from 'vuex'

/*
  state:
  1. 可以在组件模板中通过 $store.state.count 来使用状态
  2. 可以通过 mapState 映射的方式进行使用
  3. 如果是组合式 API 可以通过 hooks 方式使用
  import { useStore } from 'vuex'
  const store = useStore()
  store 同  $store 相同
*/

/*
Getters:
  1. 可以在组件模板中通过 $store.getters.getCountAdd 来使用状态
  2. 可以通过 mapGetters 映射的方式进行使用
  3. 如果是组合式 API 可以通过 hooks 方式使用
  import { useStore } from 'vuex'
  const store = useStore()
  store 同  $store 相同

*/
/*
  Mutations: 唯一修改数据的地方
  1. 通过 this.$store.commit('add')
  2. 通过 mapMutations 进行使用
*/
/*
  Actions: 处理异步的地方
  1. 通过 this.$store.dispatch('addActions')
  2. 通过 mapMutations 进行使用
*/

/*
  Module:状态模块，可以将具有相同特性属性放在一个模块中
*/
export default {
  methods: {
    ...mapMutations(['add']),
    ...mapActions(['addActions']),
    btnClick () {
      // this.$store.commit('add')
      // this.add()

      // this.$store.dispatch('addActions')
      this.addActions()
    }
  },
  computed: {
    ...mapState(['count']),
    ...mapGetters(['getCountAdd'])
  }

}
</script>
<template>
  <div>
    <div>
      使用 state 中的数据，在模板中可以通过 $store.state.count
      {{ $store.state.count }} -- {{ count }}
    </div>
    <div>
      使用 getters 中的内容，在模板直接通过 $store.getters.getCountAdd
      {{ $store.getters.getCountAdd }} --- {{ getCountAdd }}

    </div>

    <div>
      <button @click="btnClick">使用函数</button>
    </div>
    <div>
      <!-- {{ $store.student.state.name }} -->
      {{ $store.state.student.name }}
    </div>
  </div>
</template>
